<template>
  <div class="body">
    <div id="hint">
      <div class="wel__header">
        <div class="wel__info">
          <img :src="userInfo.photo" alt="" class="wel__info-img" />
          <div class="wel__info-content">
            <div class="wel__info-title">
              {{ $t("wel.info") + userInfo.name }}
            </div>
            <div class="wel__info-title">
              {{ $t("wel.dept") }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="action left"></a>
    <a class="action middle"></a>
    <a class="action right"></a>
    <div id="im-container">
      <img id="airplane" src="./img/airplane.png" />
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>
<style lang="scss" scoped>
/* General stuff */
/* The airplane image */

* {
  transition: all 0.25s linear;
}
html {
  width: 100%;
  heigth: 100%;
}
.body {
  width: 100%;
  height: 100%;
  background: url("./img/airplane-back.jpg");
  background-size: cover;
  animation: back 20s infinite;
  -webkit-animation: back 20s infinite;
  -moz-animation: back 20s infinite;
  -o-animation: back 20s infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  /* The background animation */

  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  overflow: hidden;
}
@-webkit-keyframes back {
  from {
    background-position-y: bottom;
  }
  to {
    background-position-y: top;
  }
}
#im-container {
  width: 20%;
  height: 30%;
  max-width: 300px;
  max-height: 330px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: url(img/airplane-shadow.png) no-repeat bottom right;
  background-size: 20%;
  transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
  -webkit-transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
  -moz-transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
  -o--transition: all 10s cubic-bezier(0.5, 0.025, 0.005, 2);
}

#airplane {
  display: block;
  /* The hover animation */

  width: 80%;
  height: auto;
  margin: auto;
}
.action {
  position: absolute;
  z-index: 1;
  height: 100%;
}
.action.left,
.action.right {
  width: 40%;
}
.action.middle {
  width: 20%;
  /* The direction anchors */

  right: 0;
  left: 0;
  margin: auto;
}
.left {
  left: 0;
  cursor: url("./img/pointer-left.png"), w-resize;
}
.middle {
  cursor: url("./img/pointer-center.png"), w-resize;
}
.right {
  right: 0;
  cursor: url(./img/pointer-right.png), w-resize;
}
.right:hover ~ #im-container {
  transform: translateX(120%) rotateZ(2deg);
}
.left:hover ~ div {
  transform: translateX(-120%) rotateZ(-2deg);
}
#hint {
  position: relative;
  z-index: 9;
  // bottom: 10%;
  left: 50%;
  top: 75%;
  transform: translateX(-650px);
  right: 0;
  width: 100vh;
  height: 50px;
  margin: auto;
  font-family: "Open sans", "Lato", "Helvetica", sans-serif;
  font-size: 11px;
  color: white;
  text-align: center;
  line-height: 1;
}
#hint * {
  padding: 0px;
  margin: 0px;
}
#hint h3 {
  font-weight: 100;
}
.credit {
  font-weight: 800;
}
@media all and (max-height: 500px) {
  #hint {
    bottom: 75%;
    line-height: 1;
    font-size: 14px;
  }
  #hint p {
    display: none;
  }
  #airplane {
    height: 70% !important;
    display: block;
    width: auto;
  }
}
.wel {
  &__header {
    opacity: 0.8;
    width: 100%;
    height: 90%;
    padding: 25px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__info {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    &-img {
      position: relative;
      right: 10px;
      border-radius: 72px;
      display: block;
      width: 112px;
      height: 112px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(165, 159, 159, 0.45);
      line-height: 22px;
    }
    &-title {
      padding: 6px !important;
      font-size: 22px;
      line-height: 20px;
      font-weight: 500;
      color: rgba(253, 253, 253, 0.85);
      margin-top: 20px;
      margin-bottom: 12px !important;
    }
  }
}
</style>
